.composition{
    position: relative;
    &__photo{
        width: 55%;
        box-shadow: 0 1.5rem 4rem rgba($color-black,.4);
        border-radius: 0;
        position: absolute;
        z-index: 10;
        transition: all .2s;
        outline-offset: 2rem;//外边框离图片距离2rem

        @include respond(tab-port){
            float: left;
            position: relative;
            width: 33.333%;
            box-shadow: 0 1.5rem 3rem rgba($color-black,.2);
        }

        &:hover{
            outline: 1.5rem solid $color-primary;
            transform: scale(1.05) translateY(-.5rem);//选中的图片放大1.05，且往上移
            box-shadow: 0 2.5rem 4rem rgba($color-black,.5);
            z-index: 20;
        }

        &--p1{
            left:0;
            top: -2rem;
            @include respond(tab-port){
                top: 0;
                transform: scale(1.2);
            }
        }
        &--p2{
            right:0;
            top: 2rem;
            @include respond(tab-port){
                top:-1rem;
                transform: scale(1.3);
                z-index: 100;
            }
        }
        &--p3{
            left:20%;
            top: 10rem;
            @include respond(tab-port){
                left: 0;
                top: 1rem;
                transform: scale(1.1);
            }
  
        }
    }
    &:hover &__photo:not(:hover){//没有被悬停的图片就缩放.95
        transform: scale(.95);

    }
}